import {NavLink} from 'react-router-dom'
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Image,Modal } from 'antd'
import React,{useState} from 'react'
import './index.scss'

const logo=require("../../assets/img/logo.png").default
export default function  HeaderTop(props){
    const[isModal,setModal]=useState(false)
    const[isContact,setContact]=useState(false)
    const[address,setAddress]=useState(['safsfafafahsfafsd'])
    function connectWallet(){
        setModal(true)
    }
    function closeWallet(){
        setModal(false)
    }
    function showAddress(){
        setContact(true)
    }
    function noShowAddress(){
        setContact(false)
    }
    const handleCopy=(e)=>{
        console.log(e)
        if(e.length){
            React.$message('success','复制成功')
        }
    }
    
  return(
      <div className='header'>
        <div className='header_le'>
            <NavLink to='/'></NavLink>
            <NavLink to='/Home'>
            <Image src={logo} alt="" className='heaer_logo' preview={false}/>
            </NavLink>
            <NavLink to='/Home'>首页</NavLink>
            <NavLink to='/NodeAdmin'>节点管理</NavLink>
        </div>
        <div className='header_ri'  >
            <div className='header_button' onClick={connectWallet}>链接钱包</div>

            <Modal
             visible={isContact}
             width={200}
             onCancel={noShowAddress}
             style={{ position: 'absolute', top: '80px',right: '10px'}}
             footer={null}
             closable={false}
            >
                <div className='copyModel'>
                    <div className='copymodel_top'>
                        0x61B1dC70f35d331EfcCC145b77cC37e478A35010
                    </div>
                    <CopyToClipboard
                      text={address} // 需要复制的文本
                      onCopy={handleCopy} // 复制完成的回调
                    >
                        <p className='copy_button'>
                            <img className='copyImg' src={require('../../assets/img/copy.png').default} alt="" />
                            <span className='copy'>Copy Address</span>
                        </p>
                    </CopyToClipboard>
                    <p style={{marginTop:'10px'}}>
                        <img className='contectImg' src={require('../../assets/img/connect.png').default} alt="" />
                        <span className='copy'>Disconnect Wallet</span>
                    </p>
                </div>
            </Modal>
            
        </div>
        <Modal
            visible={isModal}
            onCancel={closeWallet}
            style={{boxSizing:'border-box'}}
            width={500}
            footer={null}
            closable={false}
                >
            <div className='model'>
                <div className='model_t' >
                    <h3 className='title'>Connect Wallet</h3>
                    <img src={require('../../assets/img/close.png').default} alt="" onClick={closeWallet}/>
                </div>
                <div className='content'>
                    <div className='item meteMask'onClick={closeWallet,showAddress} >
                        <img src={require('../../assets/img/mateMask.png').default} alt="" />
                        <span style={{ color: '#333' }}>MetaMask</span>
                    </div>
                    <div className='item'>
                        <img src={require('../../assets/img/pic1.png').default} alt="" />
                        <span>WalletConnect</span>
                    </div>
                    <div className='item'>
                        <img src={require('../../assets/img/pic2.png').default} alt="" />
                        <span>WalletLink</span>
                    </div>
                    <div className='item'>
                        <img src={require('../../assets/img/pic3.png').default} alt="" />
                        <span>Portis</span>
                    </div>
                </div>
            </div>
        </Modal>
      </div>
  )
}